<template>
  <div>
    <a-row :gutter="16">
      <a-collapse default-active-key="1" expandIconPosition="right" style="margin-bottom: 10px; border: 1px solid #e8e8e8;">
        <a-collapse-panel key="1" header="其他出库信息">
          <div>
            <a-descriptions>
              <a-descriptions-item label="出库单编码">{{ orderInfo.code }}</a-descriptions-item>
              <a-descriptions-item label="客户名称">{{ orderInfo.customerName }}</a-descriptions-item>
              <a-descriptions-item label="数量">{{ orderInfo.totalQty }}</a-descriptions-item>
              <a-descriptions-item label="操作人">{{ orderInfo.updateUserName }}</a-descriptions-item>
              <a-descriptions-item label="出库时间">{{ orderInfo.updateTime }}</a-descriptions-item>
              <a-descriptions-item label="备注">{{ orderInfo.remark }}</a-descriptions-item>
            </a-descriptions>
          </div>
        </a-collapse-panel>
      </a-collapse>
    </a-row>
    <a-row :gutter="16">
      <a-collapse default-active-key="1" expandIconPosition="right" style="margin-bottom: 10px; border: 1px solid #e8e8e8;">
        <a-collapse-panel key="1" header="其他出库明细">
          <a-col :span="6" style="margin-bottom: 15px;">
            <a-list bordered item-layout="horizontal" :data-source="orderMaterialItemData">
              <a-list-item slot="renderItem" slot-scope="item" @click="onChangeSelectItemMaterial(item.materialCode)" class="materialItemClass" :class="{'active':selectedMaterialCode === item.materialCode}">
                <a-list-item-meta>
                  <div slot="description">
                    <div>{{ item.materialName }}</div>
                  </div>
                  <div slot="title"><span>{{ item.materialCode }}</span> [<span style="font-weight: bold; font-style: oblique;">{{ item.materialModel }}</span>]</div>
                </a-list-item-meta>
                <span slot="actions">
                  <a-badge :count="item.qty" :number-style="{ backgroundColor: '#52c41a' }" />
                </span>
              </a-list-item>
            </a-list>
          </a-col>
          <a-col :span="18" style="margin-bottom: 15px;">
            <a-table
              :columns="orderItemColumns"
              :dataSource="orderItemData"
              bordered
              :scroll="{x: 1000}"
              size="small"
              :rowKey="(record) => record.id"
              :pagination="pagination"
            >
            </a-table>
          </a-col>
        </a-collapse-panel>
      </a-collapse>
    </a-row>
    <footer-tool-bar>
      <a-button class="subButton" @click="handleCancel">返回</a-button>
    </footer-tool-bar>
  </div>
</template>
<script>
  import FooterToolBar from '@/components/FooterToolbar'
  import { outboundOtherDetail } from '@/api/modular/main/outbound/other/outboundOtherManage'
  export default {
    components: {
      FooterToolBar
    },
    data () {
      return {
        selectedMaterialCode: '',
        orderItemData: [],
        originOrderItemData: [],
        orderMaterialItemData: [],
        orderInfo: {},
        orderItemColumns: [
          {
            title: '条码信息',
            dataIndex: 'barcode',
            align: 'center',
            width: 300,
            fixed: 'left',
            scopedSlots: { customRender: 'barcode' }
          },
          {
            title: '物料编码',
            dataIndex: 'materialCode',
            align: 'center',
            width: 250,
            scopedSlots: { customRender: 'materialCode' }
          },
          {
            title: '物料型号',
            dataIndex: 'materialModel',
            align: 'center',
            scopedSlots: { customRender: 'materialModel' }
          },
          {
            title: '到货数量',
            dataIndex: 'qty',
            align: 'center',
            width: 100,
            scopedSlots: { customRender: 'qty' }
          },
          {
            title: '单位',
            dataIndex: 'unit',
            align: 'center',
            width: 80,
            scopedSlots: { customRender: 'unit' }
          }
        ],
        pagination: {
          pageSize: 10
        }
      }
    },
    computed: {
    },
    created () {},
    activated () {
        const oldCode = this.orderInfo.code
        this.orderInfo.code = this.$route.query.code
        if (oldCode !== this.orderInfo.code) {
          outboundOtherDetail(this.orderInfo.code).then((res) => {
            if (res.success) {
              this.orderItemData = res.data.itemList
              this.originOrderItemData = res.data.itemList
              this.orderMaterialItemData = res.data.materialItemList
              this.orderInfo.code = res.data.outboundCode
              this.orderInfo.customerName = res.data.customerName
              this.orderInfo.updateUserName = res.data.updateUserName
              this.orderInfo.updateTime = res.data.updateTime
              this.orderInfo.totalQty = res.data.totalQty
              this.orderInfo.remark = res.data.remark
            } else {
              this.$message.error('数据加载失败:' + res.message)
            }
          })
        }
      },
    methods: {
      handleCancel () {
        this.$router.push({ path: '/outboundOther' })
      },
      onChangeSelectItemMaterial (val) {
        if (this.selectedMaterialCode === val) {
          this.selectedMaterialCode = ''
          this.orderItemData = this.originOrderItemData
        } else {
          this.selectedMaterialCode = val
          this.orderItemData = this.originOrderItemData.filter(item => item.materialCode === val)
        }
      }
    }
  }
</script>
<style lang="less">
  .table-operator {
    margin-bottom: 18px;
  }
  button {
    margin-right: 8px;
  }
  .ant-collapse {
    background-color: #fff;
  }
  .ant-collapse-header {
    font-size: 16px;
  }
  .ant-collapse-content {
    overflow: hidden;
    color: rgba(0, 0, 0, 0.65);
    background-color: #fff;
    border-top: 1px solid #e8e8e8;
  }
  .materialItemClass {
    cursor: pointer;
  }
  .ant-list-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 7px 0;
  }
  .ant-list-bordered .ant-list-item {
    padding-right: 15px;
    padding-left: 15px;
  }
  .active{
    background: #f0f2f5;
  }
  .materialItemClass:hover{
    background: #e6f7ff;
  }
</style>
